import React, { useState } from "react";
// * UseState 直接传值 vs 函数返回值
// * function generateLargeArray() {
//  console.log('Generating array...');
//  return new Array(1000000).fill(0);
// }

// 直接传值
// const [state, setState] = useState(generateLargeArray());
// 这里 generateLargeArray() 会 每次组件渲染都执行。
// 如果函数很耗时，会影响性能。

// 传函数（lazy initializer）
// const [state, setState] = useState(() => generateLargeArray());
// 这里 传的是函数本身，React 会在 第一次渲染时调用这个函数来获取初始状态。
// 后续渲染不会再调用。
// 适用于 计算初始状态耗时或复杂 的场景。
// ✅ 规则总结：

// 方式	调用时机	性能	适用场景
// useState(value)	每次渲染都会计算	差	简单初始值
// useState(() => value)	只在初次渲染调用	好	复杂计算初始值
function generateLargeArray() {
  console.log("Generating array...");
  return new Array(1000000).fill(0);
}
function UseStateGreate() {
  //   const [count, setCount] = useState(generateLargeArray());
  const [count, setCount] = useState(() => generateLargeArray());

  const [sum, setSum] = useState(0);
  return (
    <>
      <div>
        <button onClick={() => setCount(setSum(sum + 1))}>+1</button>
        useState初始话单个值和函数的区别{sum}
      </div>
    </>
  );
}
export default UseStateGreate;
